<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>奕辅导</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <input type="text" id="inp1">
  <input type="text" id="inp2">
  <input type="text" id="inp3">
  <input type="text" id="inp4">
  <input type="text" id="inp5">
  <input type="text" id="inp6">
  <input type="text" id="inp7">
  <input type="text" id="inp8">
  <input type="text" id="inp9">
  <button id="btn1"></button>
  <button id="btn2"></button>
</body>
<script src="./js/dayjs.min.js"></script>
<script>
  let inp = document.querySelectorAll('input')
  let btn1 = document.querySelector('#btn1')
  let btn2 = document.querySelector('#btn2')
  //离校时间
  let leaveDate = Date.now() - (60*60*1000)
  inp[0].value =  dayjs(leaveDate).format('YYYY-MM-DD HH:mm')
  //返校时间
  let backDate = Date.now() + (4*60*60*1000)
  inp[1].value =  dayjs(backDate).format('YYYY-MM-DD HH:mm')
  //申请时间
  let applyDate = Date.now() - (3*60*60*1000)
  inp[7].value =  dayjs(applyDate).format('YYYY-MM-DD HH:mm')
  //通过时间
  let passDate = Date.now() - (2*60*50*1000)
  inp[8].value =  dayjs(passDate).format('YYYY-MM-DD HH:mm')
  //外出天数
  inp[2].value = 0.2
  //随机生成紧急联系人电话
  function getMoble() {
    var prefixArray = new Array("130", "131", "132", "133", "135", "137", "138", "170", "187", "189");
    var i = parseInt(10 * Math.random());
    console.log(i);
    var prefix = prefixArray[i];
    for (var j = 0; j < 8; j++) {
    prefix = prefix + Math.floor(Math.random() * 10);
    }
    return prefix
  }
  inp[5].value = getMoble()
  //刚进页面时禁用表单
  for(let i = 0; i < inp.length; i++){
    inp[i].disabled = true;
    if (i > 1) {
          inp[i].style.backgroundColor = '#fff'
        }
  }
  //是否禁止表单输入
  let flag = 0;
  btn1.addEventListener('click', () => {
    if (flag == 1) {
      for (let i = 0; i < inp.length; i++) {
        inp[i].disabled = true;
        if (i > 1) {
          inp[i].style.backgroundColor = '#fff'
        }
      }
      flag = 0;
    } else {
      for (let i = 0; i < inp.length; i++) {
        inp[i].disabled = false;
      }
      flag = 1;
    }
  })
  //清空浏览器缓存
  btn2.addEventListener('click',() => {
    localStorage.clear()
  })
  //获取浏览器缓存
  for(let i = 0; i<inp.length; i++){
    if(JSON.parse(localStorage.getItem(`inp${i}`))){
      inp[i].value = JSON.parse(localStorage.getItem(`inp${i}`))
    }   
  }
  //替换浏览器缓存
  for(let i = 0; i<inp.length; i++){
    inp[i].addEventListener('change', () => {
      localStorage.setItem(`inp${i}`,JSON.stringify(inp[i].value))
    })    
  }
</script>

</html>